<template>
  <div class="employees-container">
    <div class="app-container">

      <el-card style="margin-top: 10px;">
        <el-form :inline="true" :model="serchData" class="demo-form-inline" style="width:968px;display:inline-block">
          <el-form-item label="标签名称">
            <el-input v-model="serchData.tagName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="serchData.state" placeholder="请选择">
              <el-option v-for="item in statestags" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearText">清除</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div style="display:inline-block" class="right">
          <el-button icon="el-icon-edit" type="success" @click="handleAdd('add')">新增标签</el-button>
        </div>
        <div class="tips">
          <i class="el-icon-info" />
          <span>数据一共{{total}}条</span>
        </div>
        <el-table border :data="tagLists">
          <el-table-column label="序号" type="index" :index="handleIndex" />
          <el-table-column label="所属学科" prop="subjectName" />
          <el-table-column label="标签名称" prop="tagName" />
          <el-table-column label="创建者" prop="username" />
          <el-table-column label="创建日期" prop="addDate" :formatter="formatTime" />
          <el-table-column label="状态" prop="state" :formatter='formatStates' />
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="handleDisable(row)">{{row.state===1?'禁用':'启用'}}</el-button>
              <el-button type="text" size="small" :disabled='todisabeld(row)' @click="handleEdit(row,'edit')">修改</el-button>
              <el-button type="text" size="small" :disabled='todisabeld(row)' @click="handleDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination background layout="->, prev, pager, next,sizes,jumper" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="roleForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="所属学科" prop="name">
          <el-select @change="changeData" @visible-change="handleDiaOpen" v-model="newDiaForm.subjectName" placeholder="请选择">
            <el-option v-for="item in form.discipline" :key="item.value" :label="item.label" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directory">
          <el-input v-model="newDiaForm.tagName" placeholder="请输入目录名称" style="width:220px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, list, remove, detail, update, changeState } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
import { status as tagstatus } from '@/api/hmmm/constants.js'
import moment from 'moment'
export default {
  name: 'Tags',
  data () {
    return {
      // 根据条件搜索接口所需数据
      serchData: {
        page: 1,
        pagesize: 10,
        state: null,
        tagName: ''
      },
      // 选项
      statestags: [...tagstatus],
      // dialog显示隐藏
      dialogVisible: false,
      // 标签状态数据
      statesType: [{
        id: 1,
        value: '已启用'
      }, {
        id: 2,
        value: '已禁用'
      }],
      // 控制弹窗的提交按钮是新增还是修改
      type: '',
      // 编辑标签时转存的数据
      thisRow: '',
      // 当前点击行的状态
      rowState: 0,
      // 表单内的数据
      form: {
        discipline: '',
        directory: ''
      },
      // 数据换名字发添加请求
      diaForm: {},

      newDiaForm: {
        // 学科value
        subjectID: 0,
        // 学科名
        subjectName: '',
        // 目录名
        tagName: ''
      },
      // formInline: {
      //   tagName:'',
      //   type: ''
      // },
      // 请求标签列表所需
      queryData: {
        page: 1,
        pagesize: 10
      },
      // 获取到的标签列表
      tagLists: [],
      // 总共数据
      total: 0,
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        directory: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.loadTagList()
    this.handleDiaOpen()
  },
  methods: {
    // 点击更改标签是否禁用
    async handleDisable (row) {
      this.rowState = row.state
      if (this.rowState === 0) {
        this.rowState = 1
        this.stateText = '禁用'
      } else if (this.rowState === 1) {
        this.rowState = 0
        this.stateText = '启用'
      }
      const ret = await changeState({
        id: row.id,
        state: this.rowState
      })
      this.loadTagList()
    },
    // 编辑标签
    async handleEdit (row, val) {
      this.type = val
      this.dialogVisible = true
      this.newDiaForm.tagName = row.tagName
      this.newDiaForm.subjectName = row.subjectName
      this.thisRow = row.id
    },
    // 删除标签
    async handleDel (row) {
      const ret = await remove(row)
      if (ret.status === 200) {
        this.$message.success('删除标签成功')
        this.loadTagList()
      }
    },
    // 设置禁用
    todisabeld (row) {
      if (row.state === 1) {
        return false
      } else {
        return true
      }
    },
    // 将下拉列表获取到的数据改个名字发送请求
    changeData (val) {
      this.newDiaForm.subjectID = val.value
      this.newDiaForm.subjectName = val.label
    },
    // 添加标签
    async handleAdd (val) {
      this.newDiaForm = this.$options.data().newDiaForm
      this.dialogVisible = true
      this.type = val
    },
    // 获取下拉列表数据
    async handleDiaOpen () {
      const ret = await simple()
      if (ret.status === 200) {
        this.form.discipline = ret.data
      }
    },
    // 处理序号问题
    handleIndex (index) {
      const { page, pagesize } = this.queryData
      return (page - 1) * pagesize + 1 + index
    },
    // 加工获取标签列表返回的时间
    formatTime (row) {
      return moment(row.addDate).format('yyyy-MM-DD HH:mm:ss')
    },
    // 加工获取标签列表时返回的状态
    formatStates (row) {
      const obj = this.statesType.find(item => {
        return item.id === row.state
      })
      return obj ? obj.value : '已禁用'
    },
    // 切换页
    handleCurrentChange (index) {
      this.queryData.page = index
      this.loadTagList()
    },
    // 加载标签数据
    async loadTagList () {
      const ret = await list(this.queryData)
      if (ret.status === 200) {
        this.tagLists = ret.data.items
        this.total = ret.data.counts
      }
    },
    // 点击查询按钮
    async onSubmit () {
      const ret = await list(this.serchData)
      console.log(ret)
      this.tagLists = ret.data.items
      this.total = ret.data.counts
    },
    // 清除按钮
    clearText () {
      this.serchData.state = null
      this.serchData.tagName = ''
      this.loadTagList()
    },
    // dialog的确定按钮，根据type分辨是新增还是编辑
    async handleSubmit () {
      if (this.type === 'add') {
        const ret = await add(this.newDiaForm)
        this.dialogVisible = false
        this.loadTagList()
      } else {
        console.log(this.thisRow)
        const info = await update({
          id: this.thisRow,
          subjectID: this.newDiaForm.subjectID,
          tagName: this.newDiaForm.tagName
        })
        this.dialogVisible = false
        this.loadTagList()
      }
    },
    // 关闭弹窗
    handleClose () {
      this.diaForm = this.$options.data().diaForm
      this.form.directory = this.$options.data().form.directory
      this.dialogVisible = false
    }
  }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
  font-weight: 700;
  line-height: 20px;
}
.right {
  right: 50px;
  position: absolute;
}
.tips {
  color: #909399;
  line-height: 34px;
  padding: 0px 15px;
  border-radius: 5px;
  background-color: #f4f4f5;
  margin-bottom: 15px;
  font-size: 13px;
  i {
    font-size: 18px;
    margin-right: 10px;
    color: #909399;
  }
}
</style>
